<template>
	<div class="container">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/Main' }"><b>首页</b></el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/Main/ThotelFacility' }">酒店设施</el-breadcrumb-item>
			<el-breadcrumb-item><b>新增酒店设施</b></el-breadcrumb-item>
		</el-breadcrumb>

		<el-form :model="ff" :rules="rules" ref="ff" label-width="100px" class="demo-ruleForm" style="margin-top: 15px;"
		 :inline=true>
			<el-form-item label="编号" prop="id" style="width: 500px;" v-if="false">
				<el-input v-model="ff.id" style="width: 300px;" readonly="readonly" :disabled="true"></el-input>
			</el-form-item><br>
			<el-form-item label="名称" prop="name" style="width: 500px;" >
				<el-input v-model="ff.name" style="width: 300px;"></el-input>
			</el-form-item>
			<!-- <el-form-item label="类型" prop="type" style="width: 500px;">
				<el-input v-model="ff.name" style="width: 300px;"></el-input>
			</el-form-item> -->
			<el-form-item label="类型">
				<el-select v-model="ff.type" placeholder="请选择">
					<el-option v-for="item in options" v-bind:key="item.value" v-bind:value="item.value">{{item.label}}
					</el-option>
				</el-select>
				</el-form-item>
			<el-form-item label="图标" prop="icon" style="width: 500px;">
				<el-input v-model="ff.icon" style="width: 300px;"></el-input>
			</el-form-item>
			
			<!-- <el-form-item label="创建时间" required style="width: 500px;">
				<el-col :span="11" style="width: 300px;">
					<el-form-item prop="CreateTime">
						<el-date-picker type="date" placeholder="选择日期" v-model="ff.CreateTime" style="width: 100%;" readonly="readonly"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-form-item> -->
			
			
			
			<el-form-item style="width: 700px;margin-left: 300px;">
				<el-button type="primary" @click="save()">立即添加</el-button>
				<el-button @click="resetForm('ff')" style="margin-left: 100px;margin-top: 20px;">重置</el-button>
			</el-form-item>
		</el-form>

	</div>
</template>

<script>
	export default {
		data() {
			
			return {
				
				ff: {
					name: '',
					type: '',
					icon: '',
					// CreateTime: new Date().getTime(),
					
				},
				options: [{
					value: '1',
					label: '酒店'
				}, {
					value: '2',
					label: '房间'
				}],
				rules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],

					icon: [{
						required: true,
						message: '请输入图标',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			save: function() {
				console.log("到这里面来了");
				this.$refs['ff'].validate((valid) => {
					if (valid) {
						//获取请求URL
						let url = this.axios.urls.SYS_SA_ADD;
						// console.log(this.ff);
						//发送ajax请求
						console.log("到这里面来了2222",this.ff);  
						
						this.axios.post(url, this.ff).then((response) => {
							console.log("111",response.data);
							let data = response.data;
							console.log("222",data);
							if (data.success) {
								this.$confirm('新增成功！是否继续添加?', '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
									center: true
								}).then(() => {
									this.ff.name = '';
									this.ff.type = '';
									this.ff.icon = '';
									
	
								}).catch(() => {})
								// this.$router.replace('/SalChanceList');
							} else {
								this.$message({
									message: "添加成功",
									type: 'success'
								});
							}
							this.$router.replace('/Main/ThotelFacility');
						}).catch(err => {
							console.log(err);
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
				
			},
			
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			
			beforeCreate: function() {
				this.axios.post(this.axios.urls.SYS_SA_LIST, {}).then((response) => {
					
					console.log(response.data.result)
					this.userTypeList = response.data.result;
				});
			},
			
			formattertype:function(row,column){
				return row.type =='1' ? '酒店' : row.type == '2' ? '房间' : '未知'
			},
			
		},
		created:function(){
			console.log(this.ff);
		}
	}
</script>

<style>
	.container {
		margin: 15px;
	}
</style>
